<div class="row expanded">

  <div class="large-4 columns">
    <h4>Specification</h4>
    <textarea rows="20" cols="30" id="specification" style="font-family: monospace">
Example DEFINITIONS AUTOMATIC TAGS ::= 
BEGIN 

Flight ::= SEQUENCE {
   origin             IA5String,
   destination        IA5String,
   seats  INTEGER,
   crew-format ENUMERATED { six, eight, ten }
}

END		
	</textarea>
    <a href="#" class="button" id="validate">Validate</a>
    <a href="#" class="button disabled" id="compile">Compile</a>
    <a href="/download" class="button disabled" id="download" target='_blank' download>Download</a>
 </div>
  
  <div class="large-4 columns">
    <h4>Data</h4>
	<select id="types" /> 
    <input type="radio" name="decode" value="ASN" checked>&nbsp;ASN.1 Value&nbsp;
    <input type="radio" name="decode" value="BER">&nbsp;BER&nbsp;&nbsp;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&nbsp;
    <input type="radio" name="encode" value="ASN">&nbsp;ASN.1 Value&nbsp;
    <input type="radio" name="encode" value="BER" checked>&nbsp;BER&nbsp;
   <textarea rows="20" cols="30" id="data" style="font-family: monospace">
{
  origin "Paris",
  destination "London",
  seats 250,
  crew-format ten
}	   
   </textarea>
    <a href="#" class="button disabled" id="convert">Convert</a>
  </div>
  
  <div class="large-4 columns">  
    <h4>Console</h4>  
    <div id="console" style="font-family: monospace; height: 500px; overflow: auto;">
<h5><a href="https://github.com/yafred/asn1-tool">yafred/asn1-tool</a> version: {{ version }}</h5>
1.Validate specification<br/>
2.Compile specification<br/>
3.Convert data<br/>
   </div> 
  </div>
  
</div>

<script>
$(document).ready(function(){

	// if user is running mozilla then use it's built-in WebSocket
	window.WebSocket = window.WebSocket || window.MozWebSocket;

	var connection = new WebSocket('ws://{{ hostName }}');

	connection.onopen = function () {
		// connection is opened and ready to use
		connection.send('{{ sessionId }}');
	};

	connection.onerror = function (error) {
		// an error occurred when sending/receiving data
	};
	
	connection.onclose = function () {
		console.log('connection closed');
	};

	connection.onmessage = function (message) {
		console.log('Receiving ' + message.data.length + ' chars');
		console.log(message.data.substring(0, 50));

		consoleData = JSON.parse(message.data);
		if(consoleData.type === 'stdout' || consoleData.type === 'stderr') {
			consoleData.lines.forEach(function(line, index) { 
				console.log(line);
				line = line.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
						return '&#'+i.charCodeAt(0)+';';
					});
				line = line.replace(/ /g,"&nbsp;")
				$("#console").append(line + '<br/>');
			});
		}
		if(consoleData.type === 'exit') {
			$('#validate').removeClass("disabled");
			$('#compile').removeClass("disabled");
			if(consoleData.command === 'compile' || consoleData.command === 'convert') {
				$('#convert').removeClass("disabled");
				$('#download').removeClass("disabled");
			}			
		}	
		if(consoleData.type == 'map') {
			var map = JSON.parse(consoleData.content);
			for (i=0; i<map.length; i++) {
				$("#types").append('<option value="' + map[i].java + '">' + map[i].asn1 + '</option>');
			}
		}	
	};

	//
	// Events
	//
 	$('#validate').click(function(event) {
		event.preventDefault();
		$("#types").empty();
		postingCommand();
		var specification = $.trim($("#specification").val());
		if(specification) {
			var postData = {
				specification: specification
			};
			
			$.post('/validate', postData, function(data) {
			})
			.fail(function( jqxhr, textStatus, error ) {
			});
		}
    });

 	$('#compile').click(function(event) {
		event.preventDefault();
		$("#types").empty();
		postingCommand();
		var specification = $.trim($("#specification").val());
		if(specification) {
			var postData = {
				specification: specification
			};
			
			$.post('/compile', postData, function(data) {
			})
			.fail(function( jqxhr, textStatus, error ) {
			});
		}
    });

 	$('#convert').click(function(event) {
		event.preventDefault();
		postingCommand();
		var encodedData = $.trim($("#data").val());
		if(encodedData) {
			var postData = {
				encodedData: encodedData,
				className: $("#types").val(),
				decode: $("input:radio[name ='decode']:checked").val(),
				encode: $("input:radio[name ='encode']:checked").val()
			};
			
			$.post('/convert', postData, function(data) {
			})
			.fail(function( jqxhr, textStatus, error ) {
			});
		}
    });

	$('#specification').bind('input propertychange', function() {
		$('#compile').addClass("disabled");
		$('#download').addClass("disabled");
		$('#convert').addClass("disabled");
	});

	function postingCommand() {
		$("#console").empty();
		$('#validate').addClass("disabled");
		$('#compile').addClass("disabled");
		$('#download').addClass("disabled");
		$('#convert').addClass("disabled");
	}

});

</script>